<!-- 支付 pop -->
<template>
    <div>
        <el-dialog
            :visible.sync="isPayShow"
            :show-close="false"
            :lock-scroll="false"
            :append-to-body="true"
            :before-close="cancelPop"
            width="635px"
        >    
            <div class="pop-wrap">
                <div class="pop-title flex ali-c jus-b">
                    <div class="flex ali-c" v-if="userInfo">
                        <el-avatar
                            class="avatar"
                            icon="el-icon-user-solid"
                            :src="userInfo.user.picture_absolute?userInfo.user.picture_absolute:require('@/static/images/default_tx.png')"
                        ></el-avatar>
                        <h3 class="cfff fs18 ml10">{{userInfo.user.nick_name?userInfo.user.nick_name:userInfo.user.name}}</h3>
                    </div>
                    <i class="el-icon-close cfff fs20 cp" @click="cancelPop"></i>
                </div>
                <div class="pop-cont">
                    <div class="flex ali-c c666 ml20">
                        <h3 class="fs16">支付金额：</h3>
                        <div class="ml20">
                            <span style="color:#F56060;position:relative;top:2px;right:4px" class="fs22">{{payPrice}}</span>
                            <span class="fs16">元</span>
                        </div>
                    </div>
                    <h3 class="fs16 c666 mt15 ml20">支付详情：</h3>
                    <div class="pay-desc">
                        <div class="flex">
                            <b class="fs0">资源名称：</b>
                            <span class="ml10">{{sourceName}}</span>
                        </div>
                        <div class="flex mt10">
                            <b class="fs0">资源类别：</b>
                            <span class="ml10">{{sourceType}}</span>
                        </div>
                        <img src="@/static/images/jt.jpg" class="desc-jt">
                    </div>
                    <div v-if="payPrice!=0">
                        <div class="pay-tab">
                            <button
                                v-for="(item,index) in payTypeList"
                                :key="index"
                                class="pay-item"
                                :class="{'active':payIndex==index}"
                                @mouseenter="payIndex=index"
                            >  
                                <img :src="item.url" class="pay-icon">
                                <div class="ml5">{{item.name}}</div>
                            </button>
                            <div class="sign-mon flex ali-c flexc">15元/月</div>
                            <div class="sign-year flex ali-c">
                                <div class="sign-year-left">推荐</div>
                                <div class="ml5">低至8元/月</div>
                            </div>
                        </div>
                        <div class="pay-wrap">
                            <div class="flex ali-c" v-show="payIndex==0||payIndex==1">
                                <div class="pay-code">
                                    <img src="@/static/images/qr_code.png" class="img100">
                                </div>
                                <div class="ml30">
                                    <span>扫码支付：</span>
                                    <span style="color:#F56060;padding-left:5px;position:relative;top:2px;right:4px" class="fs22">{{payPrice}}</span>
                                    <span class="fs16">元</span>
                                </div>
                            </div>
                            <div class="flex" v-show="payIndex==2|payIndex==3">
                                <div>
                                    <div class="pay-code">
                                        <img src="@/static/images/qr_code.png" class="img100">
                                    </div>
                                    <div class="mt5 flex ali-c fs12">
                                        <i class="el-icon-sort cp" style="transform: rotate(90deg);"></i>
                                        <span class="ml5">切换支付宝付款码</span>
                                    </div>
                                </div>
                                <div class="ml30 mt5">
                                    <div>{{`开通司法实务平台${payIndex==2?'月':'年'}度VIP`}}</div>
                                    <div class="mt10 flex ali-c">
                                        <el-checkbox v-model="monthCheck" class="pay-check" v-if="payIndex==2"></el-checkbox>
                                        <el-checkbox v-model="yearCheck" class="pay-check" v-else></el-checkbox>
                                        <div class="fs12">
                                            <span>本人已阅读并同意</span>
                                            <a href="" target="_bank" class="ctheme">《司法实务平台Vip服务协议》</a>
                                        </div>
                                    </div>
                                    <div class="mt20">
                                        <span>扫码支付：</span>
                                        <span style="color:#F56060;padding-left:5px;position:relative;top:2px;right:4px" class="fs22">{{payPrice}}</span>
                                        <span class="fs16">元</span>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <div v-else class="oh">
                        <button class="com-full-btn custom-full" @click="popZeroBuy">立即购买</button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "xszkPopPay",
    props:{
        isPayShow:{
            type: Boolean,
            default: false,
        },
        payPrice:{
            type: Number,
            default: 0,
        },
        sourceName:{
            type: String,
            default: "",
        },
        sourceType:{
            type: String,
            default: "",
        }
       
    },
    computed: {
        userInfo(){
            return this.$store.getters.userInfo;
        },
    },
    data() {
        return {
            payIndex:0,
            payTypeList:[
                {name:'微信支付',url: require('../static/images/pay_wx.png')},
                {name:'支付宝支付',url: require('../static/images/pay_zfb.png')},
                {name:'包月免费看',url: require('../static/images/pay_mon.png')},
                {name:'包年免费看',url: require('../static/images/pay_year.png')}
            ],
            monthCheck:false,
            yearCheck:false,
        };

    },
    methods: {
        popZeroBuy(){
            this.$emit("popZeroBuy",0);
        },
        cancelPop(){
            this.$emit("cancelPop");
        },
 
       

    },
    created() {
        
    },
    watch:{
        
    }

};
</script>

<style lang="stylus" scoped>
/deep/.el-dialog__header
    padding 0
/deep/.el-dialog__body
    padding 0
/deep/.pay-check .el-checkbox__inner
    margin-top 3px
    margin-right 5px
    border-radius 50% 
/deep/.pay-check .el-checkbox__input.is-checked .el-checkbox__inner, 
/deep/.pay-check .el-checkbox__input.is-indeterminate .el-checkbox__inner
    background-color #333 !important
    border-color #333 !important
/deep/.pay-check .el-checkbox__inner:hover,
/deep/.pay-check .el-checkbox__input.is-focus .el-checkbox__inner
    border-color #333 !important
.pop-wrap
    width 100%
    min-height 327px
    background #fff
    border-radius 4px
    .pop-title
        width 100%
        height 50px
        padding 0 30px
        background #414141
        .avatar
            width 24px
            height 24px
            border 1px solid #979797
            overflow hidden
    .pop-cont
        padding 30px
        .custom-full
            float right
            margin-top 16px
            width 116px
            height 34px
            font-size 14px
            line-height 33px
            background #F56060
        .pay-desc
            margin-top 18px
            width 100%
            min-height 84px 
            border 1px solid #E8C47B
            border-radius 4px
            background #FDFAF0
            padding 8px 20px
            font-size 14px
            position relative  
            .desc-jt
                width 16px
                height 10px
                position absolute
                left 42px
                top -10px
                z-index 99
        .pay-tab
            position relative
            margin-top 40px
            display flex
            justify-content space-between
            align-items center
            .pay-item
                width 120px
                height 35px
                display flex
                align-items center
                justify-content center
                border-radius 4px
                font-size 14px
                border 1px solid #E7E7E7
                cursor pointer
                font-weight bolder
                &:hover,&.active
                    background #F5E4B2
                    border-color #E8C47B
                .pay-icon
                    flex-shrink 0
                    width 16px
                    height auto
            .sign-mon
                position absolute
                top -15px
                right 149px
                font-size 12px
                color #fff
                width 68px
                height 20px
                background #E8C47B
                border-radius 4px
            .sign-year
                position absolute
                top -15px
                right 0
                font-size 12px
                color #fff
                width 107px
                height 20px
                background #E8C47B
                border-radius 4px
                .sign-year-left
                    width 35px
                    height 20px
                    line-height 20px
                    text-align center
                    background #414141
                    border-radius 4px 0 0 4px
                    color #E8C47B
        .pay-wrap
            margin-top 32px
            width 100%
            height 115px
            display flex
            align-items center
            justify-content center
            .pay-code
                margin 0 auto
                width 96px
                height 96px
                padding 8px
                border-radius 4px
                border 1px solid #E8C47B
                   



            
</style>

